new Vue({
  el: '#z_new',
  data: {
    newList: [],
    topList: [],
    area:['日本','国产','欧美']
  },
  methods: {
    readFile() {
      this.$http.get('/moongoDB/news').then(response => {
        let res = response.body;
        
        let newList = [];
        if (res) {
          // 排行
          this.topList = res.sort(valueSortBy("readNum", "title")).reverse().slice(0, 10);
          // 遍历
          this.area.map(arr => {
            newList.push(res.filter(item => item.area.indexOf(arr) != -1).sort(timeSortBy("time")).reverse().slice(0,8));
          });
          this.newList = newList;

        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    

    toMusiccInfo(id) {
      window.open(`/newInfo?_id=${id}`, '_blank')
    },
    toNewClick(){
      window.open(`/new`, '_blank')
    }
  },

  created() {
    $('#z_new  .animeUl').html(`
  <li v-for="item in newList" >
    <a v-for="arr in item" :href="'/newInfo?_id=' + arr._id" target="_blank" >
        <div class="imgC">
         <img :src="arr.imgSrc" alt="">
        </div>
        <span>
        <div class="title" :title="arr.title">{{arr.title}}</div>
        <div class="singer">
         {{arr.time.slice(0,10)}}
         <div class="iconC">
            <span class="icon"></span>
            {{ arr.readNum }}
          </div>
         </div>
        </span>

    </a>
  </li>`);

    $('#z_new .topUl').html(`
  <li v-for="(item, index) in topList" :key="index" @click="toMusiccInfo(item._id)">
    <span class="topUl_no">{{ index + 1 }}</span>
    <span class="topUl_title" :title="item.title">{{ item.title }}</span>
    <span class="topUl_hua">
     <span class="huaC">
      <span class="icon"></span>
      {{ item.readNum }}
     </span>
     </span>
  </li>`);
    this.readFile();
  },
  mounted() {

  },
  updated() {
    /*更新页面的按钮*/
    let $dateLi = $("#z_new .dateUl li");
    let $anime_W = $("#z_new .animeUl li").width();

    $dateLi.each(function (index, ele) {
      let $that = $(this);
      let $index = index;

      $that.click(function () {
        let $animeUl = $("#z_new .animeUl");
        let $move = $index * $anime_W;

        setTimeout(() => {
          $animeUl.stop().animate({
            left: -$move
          }, 500, 'swing');
        }, 100);

        $that.siblings().removeClass("active");
        $that.addClass("active");
      });
    });
    $dateLi.eq(0).click();
  }
});